<template>
  <div class="fx-submenu">
    <div class="title" :class="{active:index===defaultActive}" @click="submenuClick">
      <div class="text">
        <slot name="title">{{ title }}</slot>
      </div>
      <span :class="{open:submenuOpen}"></span>
    </div>
    <fx-transition-unfold>
      <div class="content" v-if="submenuOpen">
        <slot name="default"></slot>
      </div>
    </fx-transition-unfold>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject, PropType } from 'vue'

export default defineComponent({
  name: 'FxSubmenu',
  props: {
    title: {
      type: String as PropType<string>,
      default: ''
    },
    index: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup () {
    const defaultActive = inject<string>('defaultActive')

    const submenuOpen = ref<boolean>(false)

    const submenuClick = (): void => {
      submenuOpen.value = !submenuOpen.value
    }

    return {
      submenuOpen,
      defaultActive,
      submenuClick
    }
  }
})
</script>
